<!-- 主页 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OPPO</title>

    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/header.css" type="text/css">
    <link rel="stylesheet" href="css/nav.css" type="text/css">
    <link rel="stylesheet" href="css/banner.css" type="text/css">
    <link rel="stylesheet" href="css/star.css" type="text/css">
    <link rel="stylesheet" href="css/accessory.css" type="text/css">
    <link rel="stylesheet" href="css/serve.css" type="text/css">
    <link rel="stylesheet" href="css/after_sale.css" type="text/css">
    <link rel="stylesheet" href="css/footer.css" type="text/css">
    <link rel="stylesheet" href="css/swiper.css" type="text/css">
    <link rel="stylesheet" href="css/totop.css" type="text/css">

    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
    <!-- 页面的顶部 -->
    <div id="top">
        <div class="container"></div>
    </div>
    <!-- 页面的头部 -->
    <div id="header">
        <div class="container">
            <div class="header_left left">
                <div class="xlwb"></div>
                <div class="txwb"></div>
                <div class="tel">4001-666-888</div>
            </div>
            <ul class="right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">积分兑换</a></li>
                <li><a href="#">帮助中心</a></li>
                <li class="shop_car">
                    <span></span>
                    <a href="#">购物车</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的导航栏 -->
    <div id="nav">
        <div class="container">
            <div class="logo left">
                <img src="img/logo.png" alt="">
            </div>
            <ul class="right">
                <li><a href="#">首页</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">体验店</a></li>
                <li><a href="#">软件商店</a></li>
                <li><a href="#">ColorOS</a></li>
            </ul>
        </div>
    </div>
    <!-- 页面的banner部分 -->
    <div id="banner">
        <div class="container">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="img/swiper1.png" alt="Slide1"></div>
                    <div class="swiper-slide"><img src="img/swiper1.png" alt="Slide2"></div>
                    <div class="swiper-slide"><img src="img/swiper1.png" alt="Slide3"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                 
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                 
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
        </div>   
    </div>
    <!-- 页面的明星机型部分 -->
    <div id="star">
        <div class="container">
            <div class="star_top">
                <img src="img/i-c-title.png" alt="" width="400px" height="48px">
            </div>
            <ul>
                <li>
                    <div>
                        <img src="img/1.png" alt="">
                    </div>
                    <h2>A31</h2>
                    <p>1600万电动旋转摄像头</p>
                    <p class="money">&yen;3999 立即购买&nbsp; <span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/OPPO-N3.png" alt="">
                    </div>
                    <h2>N3</h2>
                    <p>1600万电动旋转摄像头</p>
                    <p class="money">&yen;3999 立即购买&nbsp; <span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/OPPO-R1C.PNG" alt="">
                    </div>
                    <h2>R1C</h2>
                    <p>1600万电动旋转摄像头</p>
                    <p class="money">&yen;3999 立即购买&nbsp; <span></span></p>
                </li>
                <li class="line"></li>
                <li>
                    <div>
                        <img src="img/OPPO-R5.PNG" alt="">
                    </div>
                    <h2>R5</h2>
                    <p>1600万电动旋转摄像头</p>
                    <p class="money">&yen;3999 立即购买&nbsp; <span></span></p>
                </li>
            </ul>
        </div>

    </div>
    <!-- 页面的精选配件部分 -->
    <div id="accessory">
        <div class="container">
            <div class="acc_top">
                <img src="img/acc.png" alt="" >
            </div>
            <div class="acc_main">
                <div class="acc_left left">
                    <div class="protect-holster">
                        <img src="img/protect-holster.png" alt="">
                    </div>
                    <div class="acc_all">
                        <p>OPPO手机官网ACCESSORY配件</p>
                        <ul>
                            <li><a href="#">耳机</a></li>
                            <li><a href="#">移动电源</a></li>
                            <li><a href="#">保护壳</a></li>
                            <li><a href="#">贴膜</a></li>
                            <li><a href="#">皮套</a></li>
                            <li><a href="#">数据线</a></li>
                        </ul>
                        <h2 class="line"></h2>
                        <p class="acc"><a href="#">全部配件<span></span></a></p>
                    </div>
                    <div class="adapter">
                        <img src="img/adapter.png" alt="">
                    </div>
                    <div class="cable">
                        <img src="img/cable.png" alt="">
                    </div>
                </div>
                <div class="acc_right right">
                    <div class="acc_right_1">
                        <img src="img/OPPO-Watch.png" alt="">
                    </div>
                    <div class="acc_right_2">
                        <img src="img/OPPO-Enco-W31.png" alt="">
                    </div>
                    <div class="acc_right_2">
                        <img src="img/charge.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面的搜索OPPO部分 -->
    <!-- <div id="world">
        <div class="container"></div>
    </div> -->
    <!-- 页面的服务部分 -->
    <div id="serve">
        <div class="container">
            <ul>
                <li>
                    <dl>
                        <dt>
                            <img src="img/guarantee.png" alt="">
                        </dt>
                        <dd class="dd1">正品保障</dd>
                        <dd class="dd2">所有的商品都是原装产品</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="img/guarantee.png" alt="">
                        </dt>
                        <dd class="dd1">正品保障</dd>
                        <dd class="dd2">所有的商品都是原装产品</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="img/seven.png" alt="">
                        </dt>
                        <dd class="dd1">7天退换货</dd>
                        <dd class="dd2">支持7天退货 30天换货</dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>
                            <img src="img/guarantee.png" alt="">
                        </dt>
                        <dd class="dd1">正品保障</dd>
                        <dd class="dd2">所有的商品都是原装产品</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的售后服务部分 -->
    <div id="after_sale">
        <div class="container">
            <ul>
                <li>
                    <dl>
                        <dt>推荐产品</dt>
                        <dd><a href="#">Find X2 Pro</a></dd>
                        <dd><a href="#">Find X2</a></dd>
                        <dd><a href="#">Reno3 Pro</a></dd>
                        <dd><a href="#">Reno3</a></dd>
                        <dd><a href="#">A91</a></dd>
                        <dd><a href="#">OPPO Watch</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>购买渠道</dt>
                        <dd><a href="#">线下体验店</a></dd>
                        <dd><a href="#">官方商城</a></dd>
                        <dd><a href="#">官方授权店</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>探索精彩 OPPO</dt>
                        <dd><a href="#">关于 OPPO</a></dd>
                        <dd><a href="#">OPPO 管理层</a></dd>
                        <dd><a href="#">新闻中心</a></dd>
                        <dd><a href="#">OPPO 社区</a></dd>
                        <dd><a href="#">加入我们</a></dd>
                        <dd><a href="#">知识产权</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>商务合作</dt>
                        <dd><a href="#">企业合作</a></dd>
                        <dd><a href="#">开放平台</a></dd>
                        <dd><a href="#">采购相关</a></dd>
                        <dd><a href="#">媒体联络</a></dd>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>服务与支持</dt>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">ColorOS</a></dd>
                        <dd><a href="#">云服务</a></dd>
                        <dd><a href="#">以旧换新</a></dd>
                        <dd><a href="#">服务政策</a></dd>
                        <dd><a href="#">预置软件公示</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 页面的底部 -->
    <div id="footer">
        <div class="container">
            <p>
                <img src="img/i-f-logo.png" alt="">
                <span>@2005-2015 北京市</span>
                <a href="#">版权说明</a>
                <a href="#">版权说明</a>
                <a href="#">版权说明</a>
                <a href="#">版权说明</a>
                <a href="#">版权说明</a>
            </p>
        </div>
    </div>
    <!-- 返回顶部 -->
    <div id="totop">
        <img src="img/totop.png" alt="">
    </div>

    <script src="js/swiper.js" type="text/javascript"></script>
</body>
</html>